<template>
  <div class="vm">
    <h2 class="h-title">弹窗 popup</h2>
    <div id="map" class="map-x" ref="map"></div>

    <div class="hit-map" ref="HitMap"></div>
    <div ref="popup" class="popup">
      <div class="content">{{ currentCoordinate }}</div>
      <span class="icon-close" @click="closePopup">✖</span>
      <el-image style="height: 340px" :src="url"></el-image>
    </div>
    <div class="explain">
      <p>
        overlay：叠加层，即叠加到地图上显示的元素，
        关联了一个自定义的HTML元素，由一个单一的地图坐标点确定叠加位置。
        与控件类似，但不同的是叠加元素不是在一个固定的屏幕位置上，
        而是通过关联一个地图逻辑坐标点跟随地图移动，如标注点、popup等。
      </p>
    </div>
  </div>
</template>

<script>
import "ol/ol.css";
import { Map, View } from "ol";
import Tile from "ol/layer/Tile";
import XYZ from "ol/source/XYZ"; // 引入XYZ地图格式
import Overlay from "ol/Overlay";
import { toStringHDMS } from "ol/coordinate";
import { toLonLat } from "ol/proj";
import { OSM, TileArcGISRest } from "ol/source";
import TileGrid from "ol/tilegrid/TileGrid";

export default {
  name: "Popup",
  data() {
    return {
      map: null,
      overlay: null,
      currentCoordinate: "",
      url: require("../../assets/images/popup_test.jpg"),
    };
  },
  methods: {
    initMap() {
      // 弹窗
      this.overlay = new Overlay({
        element: this.$refs.popup, // 弹窗标签，在html里
        autoPan: true, // 如果弹窗在底图边缘时，底图会移动
        autoPanAnimation: {
          // 底图移动动画
          duration: 250,
        },
      });

      let tileGrid = new TileGrid({
        // extent: [
        //   -2.0037507067161843E7, -1.819812769412998E7, 2.0037507067161843E7,
        //   2.8686510967305996E7
        // ],
        extent: [
          -2.0038038342787e7, -1.819812769412998E7, 2.0037832342787e7,
          2.8686510967305996E7
        ],
        // origin: [-2.0037508342787e7, 2.0037508342787e7],
        origin: [-2.0038038342787e7, 2.0037832342787e7],
        tileSize: [256, 256],
        resolutions: [
          156543.03392800014, 78271.51696399994, 39135.75848200009,
          19567.87924099992, 9783.93962049996, 4891.96981024998,
          2445.98490512499, 1222.992452562495, 611.4962262813797,
          305.74811314055756, 152.87405657041106, 76.43702828507324,
          38.21851414253662, 19.10925707126831, 9.554628535634155,
          4.77731426794937, 2.388657133974685, 1.1943285668550503,
          0.5971642835598172,0.29858214164761665
        ],
      });

      // 实例化地图
      this.map = new Map({
        target: this.$refs.map,
        layers: [
          new Tile({
            source: new XYZ({
              url: "http://t6.tianditu.com/DataServer?T=vec_c&x={x}&y={y}&l={z}&tk=4d314458b2e0a90a498c0ae62142c9fd",
              projection: "EPSG:4326",
            }),
          }),
          // new Tile({
          //   name: "defaultLayer",
          //   id: "defaultLayerID",
          //   source: new XYZ({
          //     tileGrid: tileGrid,
          //     url: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
          //   }),
          //   // opacity: 0.9,
          //   opacity: 1,
          // }),
          // new Tile({
          //   extent: [-2.0037507067161843E7,-3.0240971958386254E7,2.0037507067161843E7,3.0240971958386205E7],
          //   source: new TileArcGISRest({
          //     // hidpi: false,
          //     // params: {
          //     //   dpi: "96"
          //     // },
          //     // tileGrid: tileGrid,
          //     url: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer",
          //   }),
          //   opacity: 0.8,
          // }),
          new Tile({
            // extent: [-2.0037507067161843E7,-3.0240971958386254E7,2.0037507067161843E7,3.0240971958386205E7],
            source: new TileArcGISRest({
              // hidpi: false,
              // params: {
              //   dpi: "96"
              // },
              // tileGrid: tileGrid,
              url: "http://112.17.127.75:8008/arcgis/rest/services/andi/andi_uav_test/MapServer",
            }),
            // opacity: 0.8,
          }),
          // new Tile({
          //   source: new XYZ({
          //     url: 'http://112.17.127.75:8008/arcgis/rest/services/sichuan/sichuan_bs2/MapServer/tile/{z}/{y}/{x}',
          //     // url: 'http://112.17.127.75:8008/arcgis/rest/services/ruian/ruian_waterplatform/MapServer/tile/{z}/{y}/{x}',
          //     // url: 'http://112.17.127.75:8008/arcgis/rest/services/ruian/ruian_waterplatform/MapServer/tile/{z}/{y}/{x}?blank=false',
          //     projection: "EPSG:4326",
          //     // minZoom: 2,
          //     // minResolution: 3.352761331156695E-7
          //   }),
          //   // maxZoom: 23,
          //   // maxResolution:  0.010986328329934226
          // }),
        ],
        overlays: [this.overlay], // 把弹窗加入地图
        view: new View({
          projection: "EPSG:4326", 
          // center: [119.19003081344133, 25.329447405433886],
          center: [119.634072, 29.031330],
          // minZoom:10,
          // zoom: 6,
          zoom: 16,
          minZoom: 3,
          minResolution: 3.352761331156695e-7,
        }),
      });

      this.mapClick();
      this.map.on("moveend", (evt) => {
        console.log(this.map.getView().getZoom(), "zoom=====================");
      });
    },

    mapClick() {
      this.map.on("singleclick", (evt) => {
      // this.map.on("pointermove", (evt) => {
        const coordinate = evt.coordinate; // 获取坐标
        console.log(coordinate);
        // const hdms = toStringHDMS(toLonLat(coordinate)) // 转换坐标格式
        const hdms = toStringHDMS(coordinate); // 转换坐标格式
        this.currentCoordinate = hdms; // 保存坐标点
        this.overlay.setPosition(coordinate);
      });
    },
    // 关闭弹窗
    closePopup() {
      this.overlay.setPosition(undefined);
      this.currentCoordinate = null;
    },
  },
  mounted() {
    this.initMap();
    this.map.getLayers().forEach((element) => {
      // console.log(element.get("id"),"===================");
      if (element.get("id") == "defaultLayerID") {
        console.log(element, "============element==============");
      }
    });
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/varibles.scss";
.popup {
  // visibility: hidden;
  width: 600px;
  height: 400px;
  background: #fff;
  position: relative;
  top: -410px;
  left: -300px;
  box-sizing: border-box;
  padding: 10px;
  background-color: $acticeBacgroundColor;
  color: #fff;

  &::after {
    content: "";
    display: block;
    position: absolute;
    width: 20px;
    height: 20px;
    background: $acticeBacgroundColor;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
  }

  .icon-close {
    position: absolute;
    top: 0px;
    right: 8px;
  }

  .content {
    margin-top: 14px;
  }
}
</style>